<template>
  <div class="button">
    <h1>Button 组件示例</h1>
    <h2>设计原则</h2>
    <ul>
      <li>可以更具按钮的不同指导用户完成想要的功能。</li>
      <li>防止用户进行危险的操作。</li>
    </ul>
    <Demo :component="Button1Demo" />
    <h2>其他 API</h2>
    <Demo :component="Button2Demo" />
    <Demo :component="Button3Demo" />
    <Demo :component="Button4Demo" />
    <Demo :component="Button5Demo" />
  </div>
</template>

<script lang="ts">
import Demo from "../../components/Demo.vue";
import Button1Demo from "../../components/Button1.demo.vue";
import Button2Demo from "../../components/Button2.demo.vue";
import Button3Demo from "../../components/Button3.demo.vue";
import Button4Demo from "../../components/Button4.demo.vue";
import Button5Demo from "../../components/Button5.demo.vue";
export default {
  components: {
    Demo,
  },
  setup() {
    return {
      Button1Demo,
      Button2Demo,
      Button3Demo,
      Button4Demo,
      Button5Demo,
    };
  },
};
</script>
<style lang="scss">
.button {
  > h1 {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 16px;
  }
  > h2 {
    display: flex;
  }
  > ul {
    > li {
      display: flex;
      margin: 16px 0;
    }
  }
}
</style>